<template>
  <div class="page" v-if="movie">
    <nav class="breadcrumb">
      <router-link to="/">首页</router-link> / 
      <router-link :to="`/movie/${movie.id}`">{{ movie.title }}</router-link> / 
      播放
    </nav>
    <div class="player-container">
      <Player :source="currentSource" :subtitles="movie.subtitles" />
      <div class="sources">
        <span>片源：</span>
        <button v-for="s in movie.sources" :key="s.label"
                :class="['btn', s.label===currentSource.label ? 'active' : '']"
                @click="currentSource = s">{{ s.label }}</button>
      </div>
    </div>
    <div class="movie-info">
      <h2>{{ movie.title }}</h2>
      <div class="meta">
        <span>年份：{{ movie.year }}</span> ·
        <span>评分：{{ movie.rating }}</span> ·
        <span>时长：{{ Math.round(movie.duration/60) }} 分</span>
      </div>
    </div>
  </div>
  <div v-else class="page">未找到影片</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useMovieStore } from '../store/index';
import { useUserStore } from '../store/user';
import Player from '../components/Player.vue';

const props = defineProps({
  id: {
    type: Number,
    required: true
  }
});

const route = useRoute();
const store = useMovieStore();
const userStore = useUserStore();
const movie = ref(null);
const currentSource = ref(null);

onMounted(async () => {
  if (!store.movies.length) await store.fetch();
  movie.value = store.getById(props.id);
  currentSource.value = movie.value?.sources?.[0] || null;
  // 添加到观看记录
  if (movie.value && userStore.isLoggedIn) {
    userStore.addToWatchHistory(movie.value);
  }
});
</script>

<style scoped>
.page { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 12px; 
  color: #e9eef9; 
  width: 100%;
  box-sizing: border-box;
}
.breadcrumb { font-size: 13px; color: #9aa6b2; margin-bottom: 10px; }
.breadcrumb a { color: #4f8cff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.player-container { margin-bottom: 20px; }
.sources { margin-top: 8px; }
.btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #2a3040; background: #1b2230; color: #cfe1ff; cursor: pointer; margin-right: 8px; }
.btn.active { background: #4f8cff; border-color: #4f8cff; color: #fff; }
.movie-info h2 { margin: 6px 0 10px; }
.meta { font-size: 13px; color: #9aa6b2; }
</style>